<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <div>
      <h1>总结</h1>
      <p>1.函数式编程的运算不直接操作值，而是由函子完成</p>
      <p>2.函子就是一个实现了map契约的对象</p>
      <p>3.我们可以把函子想象成一个盒子,这个盒子里面封装了一个值</p>
      <p>
        4.想要处理盒子中的值，我们需要给盒子的map方法传递一个处理的函数(纯函数)，由这个函数来对值进行处理
      </p>
      <p>5.最终map方法返回一个包含最新的盒子(函子)</p>
      <h2>该函子底问题是传入null函子undefind时会报错</h2>
    </div>
    <script>
      class Container {
        static of(value) {
          return new Container(value);
        }
        constructor(value) {
          this._value = value;
        }
        map(fn) {
          return Container.of(fn(this._value));
        }
      }

      let r = Container.of(5);
      console.log(r); // Container {value : 5}
      let r2 = Container.of(5).map((x) => x + 2);
      console.log(r2); //Container {value : 7}
      let r3 = Container.of(5)
        .map((x) => x + 2)
        .map((x) => x * x);
      console.log(r3); //Container {value : 49}

      let r5 = Container.of("xujingquan").map((x) => x.toUpperCase());
      console.log(r5); ////Container {value : 'XUJINGQUAN'}

      // 这里报错，违反了函数的定义，没有按照相同的输入相同的输出,产生副作用
      let r4 = Container.of(null).map((x) => x.toUpperCase());
      console.log(r4); //报错
    </script>
  </body>
</html>
